<template v-title data-title="注册">
  <div id="register" >
    <HeadContainer></HeadContainer>
    <div class="passport-wrapper">
      <div class="container">
        <div class="passport-sign">
          <div class="active">注册蜗牛学堂账号</div>
          <!-- tab-group -->
          <div class="tab-group">
            <el-form :model="registerForm" status-icon :rules="loginRules" ref="registerForm">
              <div class="passport-form passport-form-sign" id="regUser">
                <div class="form-item">
                  <el-form-item prop="mobile">
                    <i class="phone-icon"></i>
                      <el-input type="text" v-model="registerForm.mobile" class="passport-txt xl w-full" id="txtUsername" placeholder="请输入手机号"></el-input>
                    <p id="_userid"></p>
                  </el-form-item>
                </div>
                <div class="form-item">
                  <el-form-item prop="password">
                    <i class="mima-icon"></i>
                    <el-input type="password"  v-model="registerForm.password" class="passport-txt xl w-full" id="txtPassword" placeholder="请输入密码，6-16位字母或数字组合"></el-input>
                    <p id="_userpwdok"></p>
                  </el-form-item>
                </div>
                <div class="form-item form-mcode">
                  <i class="yzm-icon"></i>
                  <el-form-item prop="mobilecode">
                    <el-input type="text" v-model="registerForm.mobilecode" class="passport-txt xl w-full"placeholder="请输入验证码" autocomplete="off"></el-input>
                    <input id="zphone" :disabled="emsButDisabled" @click="registerMobileCode" type="button" value="获取验证码" class="js-getcode" />
                  </el-form-item>
                </div>
                <div class="form-item">
                  <button type="submit" @click="register" class="passport-btn">立即注册</button>
                </div>
              </div>
            </el-form>
          </div>
          <!-- tab-group End -->
          <!-- 用户注册协议 -->
          <div class="yxw-yhzcxy">点击注册表示已阅读并同意<a href="#" target="_blank">《蜗牛学堂用户服务协议》</a>
          </div>
          <!-- 用户注册协议 End -->
        </div>
      </div>
    </div>
    <!-- 底部版权 -->
    <FooterContainer></FooterContainer>
    <!-- 底部版权 End -->
  </div>
</template>
<script>

import HeadContainer from '@/views/HeadContainer'
import FooterContainer from '@/views/FooterContainer'

//校验 工具类型 的方法
import {isvalidMobile, isvalidPassword, isvalidateMobilecode} from '@/utils/validate'
// 引入 主从的api 发送请求
import register from "@/api/register";
import idempotent from "@/api/idempotent";
export default {
  name: "Register",
  components:{HeadContainer,FooterContainer},
  data(){
    /*用于校验手机号的校验器
    * rule: 校验规则
    * value： 需要校验的值
    * callback：校验完成以后的回调函数
    * */
    const validateMobile = (rule, value, callback) => {
      console.log('校验规则：',rule)
      if (!isvalidMobile(value)) {
        callback(new Error('请输入正确的手机号'))
      } else {
        /*手机号码验证通过以后发送请求获取手机号码是否注册过*/
        register.isRegisterMobileApi(value).then(data =>{
          console.log(data)
          if(data.message === "2") {
            callback();
          }else {
            callback(new Error(data.data));
          }
        }).catch(data => {
          console.log(data)
        })
      }
    }
    const validateMobilecode = (rule, value, callback) => {
      if (!isvalidateMobilecode(value)) {
        callback(new Error('必须输入4位验证码'))
      } else {
        callback()
      }
    }
    /*用于校验密码的校验器*/
    const validatePassword = (rule, value, callback) => {
      if (!isvalidPassword(value)) {
        callback(new Error('必须包含大小写字母和数字的组合，不能使用特殊字符，长度在8-10之间'))
      } else {
        callback()
      }
    }
    return{
      registerForm:{
        mobile: '13718413397',
        password: 'Abc123456'
      },
      emsButDisabled: false,
      /*定义校验规则的数据模型*/
      loginRules: {
        /*名字必须跟数据模型中的属性名称一致
        *   required： 必填项
        *   trigger： 失去焦点触发
        *   validator： 校验器
        * */
        mobile: [{ required: true, trigger: 'blur', validator: validateMobile }],
        password: [{ required: true, trigger: 'blur', validator: validatePassword }],
        mobilecode: [{ required: true, trigger: 'blur', validator: validateMobilecode }]
      }
    }
  },
  methods: {
    registerMobileCode() {
      register.registerMobileCodeApi(this.registerForm.mobile).then(data => {
        const message  = data.message;
        if(message === 'ok'){
          this.$message({
            type: 'success',
            message: data.data
          })
        }
      }).catch(data =>{
        console.log(data)
      })
    },
    register(){
      register.registerApi(this.registerForm).then(data => {
        console.log("注册成功:", data);
        //跳转到登陆页面
        this.$router.push({path : "/login"})
      }).catch(data => {
        console.log(data)
      })
    }
  },
  created() {
    //进入页面调用获取接口幂等验证的id
    idempotent.getIdempotentIdApi().then(data => {
      const  idempotentId = data.data;
      //把用于接口幂等校验的id存在store中
      this.$store.state.idempotentId = idempotentId;
      console.log('注册从后台获取的幂等id', this.$store.state.idempotentId)
    }).catch(data=>{
      console.log(data)
    })
  }
}
</script>

<style src="../assets/css/passport-rew.min.css" scoped></style>